layui.use(['form', 'admin', 'ax', 'upload'], function () {
    var $ = layui.jquery;
    var $ax = layui.ax;
    var form = layui.form;
    var admin = layui.admin;
    var upload = layui.upload;

    var itemIndex = 0; // 广告内容项索引
    var onlineItemIndex = 0; // 注册时长广告内容项索引
    var advertId = Feng.getUrlParam("id");

    // 加载设备列表
    var deviceAjax = new $ax(Feng.ctxPath + "/nanSellerDevice/listAll");
    var deviceRes = deviceAjax.start();
    if (deviceRes.success) {
        var devices = deviceRes.data;
        var html = "";
        for (var i = 0; i < devices.length; i++) {
            var displayName = devices[i].code + ' - ' + devices[i].model;
            if (devices[i].note) {
                displayName += ' (' + devices[i].note + ')';
            }
            html += '<option value="' + devices[i].code + '">' + displayName + '</option>';
        }
        $("#deviceId").append(html);
        form.render('select');
    }

    // 获取详情信息
    var detailAjax = new $ax(Feng.ctxPath + "/nanPopupAdvert/detail?id=" + advertId);
    var detailResult = detailAjax.start();
    
    if (detailResult.success) {
        var data = detailResult.data;
        
        // 填充基本信息
        form.val('nanPopupAdvertForm', data);
        
        // 根据类型显示对应的区域
        var type = parseInt(data.type);
        if (type === 1 || type === 2) {
            $('#itemsCard').show();
            // 加载广告内容项
            if (data.items && data.items.length > 0) {
                for (var i = 0; i < data.items.length; i++) {
                    var item = data.items[i];
                    addItemBox(item);
                }
            }
        } else if (type === 3) {
            $('#commentCard').show();
            // 添加类型3的必填验证
            $('#delayHours').attr('lay-verify', 'required').attr('required', 'required');
            $('#linkType').attr('lay-verify', 'required').attr('required', 'required');
            $('#linkUrl').attr('lay-verify', 'required').attr('required', 'required');
        } else if (type === 4) {
            $('#delayHoursField').show();
            $('#onlineItemsCard').show();
            // 类型4不需要选择设备：隐藏并清除值
            $('#deviceField').hide();
            $('#deviceId').val('').removeAttr('lay-verify').removeAttr('required');
            // 添加类型4的必填验证
            $('#delayHoursInput').attr('lay-verify', 'required').attr('required', 'required');
            // 加载广告内容项
            if (data.items && data.items.length > 0) {
                for (var i = 0; i < data.items.length; i++) {
                    var item = data.items[i];
                    addOnlineItemBox(item);
                }
            }
        }

        form.render();
    }

    // 监听类型选择
    form.on('select(type)', function (data) {
        var type = parseInt(data.value);

        // 隐藏所有动态区域
        $('#itemsCard').hide();
        $('#commentCard').hide();
        $('#onlineItemsCard').hide();
        $('#delayHoursField').hide();

        // 清空内容项
        $('#itemsContainer').html('');
        $('#onlineItemsContainer').html('');
        itemIndex = 0;
        onlineItemIndex = 0;

        // 移除所有必填验证
        $('#delayHours').removeAttr('lay-verify').removeAttr('required');
        $('#linkType').removeAttr('lay-verify').removeAttr('required');
        $('#linkUrl').removeAttr('lay-verify').removeAttr('required');
        $('#delayHoursInput').removeAttr('lay-verify').removeAttr('required');

        // 设备字段默认显示并必填
        $('#deviceField').show();
        $('#deviceId').attr('lay-verify', 'required').attr('required', 'required');

        if (type === 1 || type === 2) {
            // 类型1/2：显示广告内容列表
            $('#itemsCard').show();
        } else if (type === 3) {
            // 类型3：显示评论弹窗配置
            $('#commentCard').show();
            // 添加类型3的必填验证
            $('#delayHours').attr('lay-verify', 'required').attr('required', 'required');
            $('#linkType').attr('lay-verify', 'required').attr('required', 'required');
            $('#linkUrl').attr('lay-verify', 'required').attr('required', 'required');
        } else if (type === 4) {
            // 类型4：显示注册时长字段和广告内容列表
            $('#delayHoursField').show();
            $('#onlineItemsCard').show();
            // 类型4不需要选择设备：隐藏并清除值
            $('#deviceField').hide();
            $('#deviceId').val('').removeAttr('lay-verify').removeAttr('required');
            // 添加类型4的必填验证
            $('#delayHoursInput').attr('lay-verify', 'required').attr('required', 'required');
        }

        form.render();
    });

    // 添加广告内容项（带数据）
    function addItemBox(itemData) {
        var template = $('#itemTemplate').html();
        var html = template.replace(/\{\{index\}\}/g, itemIndex);
        $('#itemsContainer').append(html);
        
        // 填充数据
        if (itemData) {
            var $box = $('.item-box[data-index="' + itemIndex + '"]');
            $box.find('.item-imageUrl').val(itemData.imageUrl);
            $box.find('.item-imagePreview').attr('src', Feng.cdn + itemData.imageUrl);
            $box.find('.item-linkType').val(itemData.linkType);
            $box.find('.item-linkUrl').val(itemData.linkUrl);
            $box.find('.item-sort').val(itemData.sort);
        }
        
        // 为新添加的项绑定上传事件
        bindUploadEvent(itemIndex);
        
        itemIndex++;
        form.render();
    }

    // 添加广告内容项（空白）
    $('#btnAddItem').click(function () {
        addItemBox(null);
    });

    // 删除广告内容项
    $(document).on('click', '.btn-remove-item', function () {
        $(this).closest('.item-box').remove();
    });

    // 添加注册时长广告内容项（带数据）
    function addOnlineItemBox(itemData) {
        var template = $('#itemTemplate').html();
        var html = template.replace(/\{\{index\}\}/g, onlineItemIndex);
        $('#onlineItemsContainer').append(html);

        // 填充数据
        if (itemData) {
            var $box = $('#onlineItemsContainer .item-box[data-index="' + onlineItemIndex + '"]');
            $box.find('.item-imageUrl').val(itemData.imageUrl);
            $box.find('.item-imagePreview').attr('src', Feng.cdn + itemData.imageUrl);
            $box.find('.item-linkType').val(itemData.linkType);
            $box.find('.item-linkUrl').val(itemData.linkUrl);
            $box.find('.item-sort').val(itemData.sort);
        }

        // 为新添加的项绑定上传事件
        bindOnlineUploadEvent(onlineItemIndex);

        onlineItemIndex++;
        form.render();
    }

    // 添加注册时长广告内容项（空白）
    $('#btnAddOnlineItem').click(function () {
        addOnlineItemBox(null);
    });

    // 绑定图片上传事件
    function bindUploadEvent(index) {
        var selector = '.item-box[data-index="' + index + '"] .btn-upload-image';
        upload.render({
            elem: selector,
            url: Feng.ctxPath + '/system/upload',
            done: function (res) {
                if (res.success) {
                    var $box = $(selector).closest('.item-box');
                    $box.find('.item-imagePreview').attr('src', Feng.cdn + res.data.finalName);
                    $box.find('.item-imageUrl').val(res.data.finalName);
                    Feng.success("上传成功！");
                } else {
                    Feng.error("上传失败！" + res.message);
                }
            },
            error: function () {
                Feng.error("上传失败！");
            }
        });
    }

    // 绑定注册时长图片上传事件
    function bindOnlineUploadEvent(index) {
        var selector = '#onlineItemsContainer .item-box[data-index="' + index + '"] .btn-upload-image';
        upload.render({
            elem: selector,
            url: Feng.ctxPath + '/system/upload',
            done: function (res) {
                if (res.success) {
                    var $box = $(selector).closest('.item-box');
                    $box.find('.item-imagePreview').attr('src', Feng.cdn + res.data.finalName);
                    $box.find('.item-imageUrl').val(res.data.finalName);
                    Feng.success("上传成功！");
                } else {
                    Feng.error("上传失败！" + res.message);
                }
            },
            error: function () {
                Feng.error("上传失败！");
            }
        });
    }

    // 表单提交
    form.on('submit(btnSubmit)', function (data) {
        var type = parseInt($('#type').val());

        // 验证类型1/2必须至少有一个内容项
        if ((type === 1 || type === 2) && $('#itemsContainer .item-box').length === 0) {
            Feng.error("请至少添加一个广告内容！");
            return false;
        }

        // 验证类型4必须至少有一个内容项
        if (type === 4 && $('#onlineItemsContainer .item-box').length === 0) {
            Feng.error("请至少添加一个广告内容！");
            return false;
        }

        // 验证类型1/2的内容项必填字段
        if (type === 1 || type === 2) {
            var valid = true;
            $('#itemsContainer .item-box').each(function () {
                var imageUrl = $(this).find('.item-imageUrl').val();
                var linkType = $(this).find('.item-linkType').val();
                var linkUrl = $(this).find('.item-linkUrl').val();

                if (!imageUrl || !linkType || !linkUrl) {
                    Feng.error("请完整填写所有广告内容项的必填字段！");
                    valid = false;
                    return false;
                }
            });

            if (!valid) {
                return false;
            }
        }

        // 验证类型4的内容项必填字段
        if (type === 4) {
            var valid = true;
            $('#onlineItemsContainer .item-box').each(function () {
                var imageUrl = $(this).find('.item-imageUrl').val();
                var linkType = $(this).find('.item-linkType').val();
                var linkUrl = $(this).find('.item-linkUrl').val();

                if (!imageUrl || !linkType || !linkUrl) {
                    Feng.error("请完整填写所有广告内容项的必填字段！");
                    valid = false;
                    return false;
                }
            });

            if (!valid) {
                return false;
            }
        }

        // 收集表单数据
        var formData = data.field;

        // 如果是类型1/2，收集items数据
        if (type === 1 || type === 2) {
            var items = [];
            $('#itemsContainer .item-box').each(function (index) {
                items.push({
                    imageUrl: $(this).find('.item-imageUrl').val(),
                    linkType: $(this).find('.item-linkType').val(),
                    linkUrl: $(this).find('.item-linkUrl').val(),
                    sort: $(this).find('.item-sort').val() || 0
                });
            });
            formData.itemsJson = JSON.stringify(items);
        }

        // 如果是类型4，收集items数据
        if (type === 4) {
            var items = [];
            $('#onlineItemsContainer .item-box').each(function (index) {
                items.push({
                    imageUrl: $(this).find('.item-imageUrl').val(),
                    linkType: $(this).find('.item-linkType').val(),
                    linkUrl: $(this).find('.item-linkUrl').val(),
                    sort: $(this).find('.item-sort').val() || 0
                });
            });
            formData.itemsJson = JSON.stringify(items);
        }
        
        // 提交数据
        var ajax = new $ax(Feng.ctxPath + "/nanPopupAdvert/editItem", function (data) {
            Feng.success("编辑成功！");
            window.location.href = Feng.ctxPath + '/nanPopupAdvert';
        }, function (data) {
            Feng.error("编辑失败！" + data.responseJSON.message);
        });
        ajax.set(formData);
        ajax.start();

        return false;
    });

    // 取消按钮
    $('#cancel').click(function () {
        window.location.href = Feng.ctxPath + '/nanPopupAdvert';
    });
});

